<template>
  <div class="layui-col-md12">
    <div class="layui-card">
      <div class="layui-card-header">
        <span>
          <i class="fa fa-align-left"></i> 流水信息查看
        </span>
      </div>
      <div class="layui-card-header">
        <div class="layui-form-item">
          <input
            type="text"
            v-model="accountId"
            maxlength="18"
            lay-verify="title"
            autocomplete="off"
            placeholder="请输入要查询的账户"
            class="layui-input my_input"
            oninput="value=value.replace(/[^\d]/g,'')"
            style="    width: 50%;position: relative;float: left;top: 2px;"
          >
          <div class="dropdown" style=" float: left;left: 1%;    top: -1px;">
            <button
              class="btn btn-default dropdown-toggle"
              type="button"
              id="dropdownMenu2"
              data-toggle="dropdown"
              aria-haspopup="true"
              aria-expanded="false"
              style="    border-radius: 0px;border-color: #e6e6e6;height: 38px;"
            >
              查询方式
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
              <li>
                <a @click.prevent="queryTranInfo('1')">存款记录</a>
              </li>
              <li>
                <a @click.prevent="queryTranInfo('2')">取款记录</a>
              </li>
              <li>
                <a @click.prevent="queryTranInfo('3')">汇款记录</a>
              </li>
              <li>
                <a @click.prevent="queryTranInfo('4')">收款记录</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="layui-card-body" v-if="mainTable" style="text-align: center;color: gray;">查询无记录</div>
      <div class="layui-card-body" v-if="saveAndGetTable">
        <table class="table">
          <thead>
            <tr>
              <th>流水号</th>
              <th>账号</th>
              <th>交易金额</th>
              <th>交易时间</th>
              <th>交易信息</th>
              <th>交易类型</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="tranResult in tranResults">
              <td>{{tranResult.tranNum}}</td>
              <td>{{tranResult.payerCardId}}</td>
              <td>{{tranResult.tranCash}}</td>
              <td>{{tranResult.tranDate}}</td>
              <td>{{tranResult.tranInfo}}</td>
              <td v-if="tranResult.tranType==1">存款</td>
              <td v-if="tranResult.tranType==2">取款</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="layui-card-body" v-if="tranFlowTable">
        <table class="table">
          <thead>
            <tr>
              <th>流水号</th>
              <th>汇款方</th>
              <th>收款方</th>
              <th>交易金额</th>
              <th style="    width: 100px;">交易时间</th>
              <th>交易信息</th>
              <th>交易类型</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="tranResult in tranResults">
              <td>{{tranResult.tranNum}}</td>
              <td>{{tranResult.payerCardId}}</td>
              <td>{{tranResult.receiveCardId}}</td>
              <td>{{tranResult.tranCash}}</td>
              <td>{{tranResult.tranDate}}</td>
              <td>{{tranResult.tranInfo}}</td>
              <td v-if="tranResult.tranType==3">汇款</td>
              <td v-if="tranResult.tranType==4">收款</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import Qs from "qs";
export default {
  data() {
    return {
      accountId: "", //账户
      mainTable: true, //进去显示页面
      saveAndGetTable: false, //存款或取款表
      tranFlowTable: false, //汇款表
      tranResults: [] //交易记录
    };
  },
  methods: {
    queryTranInfo: function(index) {
      //根据传过来的标识确定是1存款记录还是2取款或是3汇款
      var cardRegix = /^[\d]{18}$/;
      if (!this.accountId.match(cardRegix)) {
        this.$message.error("账户必须要18位");
        return false;
      }
      $("tbody").empty("");
      this.tranResults = []; //清空数组
      var data = Qs.stringify({
        cardId: this.accountId,
        tranType: index
      });
      this.$axios
        .post("/bk-user/queryTranInfo", data, {
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        })
        .then(result => {
          if (result.data.code === 200) {
            for (var i = 0; i < result.data.data.length; i++) {
              this.tranResults.push(
                //将查询的结果添加到数组中
                result.data.data[i]
              );
            }
            if (
              1 == result.data.data[0].tranType ||
              2 == result.data.data[0].tranType
            ) {
              //判断是哪个表格显现
              this.mainTable = false;
              this.tranFlowTable = false;
              this.saveAndGetTable = true;
            } else {
              this.mainTable = false;
              this.saveAndGetTable = false;
              this.tranFlowTable = true;
            }
            $("input").each(function() {
              //清空表单
              $(this).val("");
            });
          } else if (result.data.code === 400) {
            this.mainTable = true;
            this.tranFlowTable = false;
            this.saveAndGetTable = false;
            this.$message.error(result.data.message);
          }
        })
        .catch(failResponse => {});
    }
  }
};
</script>
<style>
</style>
